<template>
	<view class="animated fadeIn faster p-bg" style="min-height: 100vh;">
		<view :style="{'height': titleBarHeight + 'px','paddingTop':statusBarHeight+'px'}" class="d-flex d-flex-middle px-3 mb-5" @click="goBack">
			<text class="iconfont icon-31fanhui1 colorfff"></text>
		</view>
		<view class="mb-10" style="padding-left: 60rpx;padding-right: 60rpx;">
			<view class="mb-2">
				<text class="colorfff" style="font-size: 42rpx;">你好，欢迎使用</text>
			</view>
			<view>
				<text class="colorfff" style="font-size: 62rpx;">请填写基本信息</text>
			</view>
		</view>
		<view style="padding-left: 60rpx;padding-right: 60rpx;">
			<view class="mb-2 d-flex d-flex-middle" style="margin-left: -10rpx;">
				<text class="iconfont icon-xiaoxingxing font36 colorxin"></text>
				<text class="colorfff font36">请选择学校：</text>
			</view>
			<view class="bg-fff rounded20 inpt d-flex d-flex-middle mb-4">
				<picker @change="schoolPickerChange" :value="schoolIndex" :range="list" range-key="name" class="d-flex-item pl-2">
					<text class="font32" :class="list[schoolIndex].id==0?'colorhold':'color5c'">{{list[schoolIndex].name}}</text>
				</picker>
				<view class="px-3">
					<text class="iconfont icon-xiajiantou main-color font36"></text>
				</view>
			</view>
			<view class="mb-2 d-flex d-flex-middle" style="margin-left: -10rpx;">
				<text class="iconfont icon-xiaoxingxing font36 colorxin"></text>
				<text class="colorfff font36">请选择专业：</text>
			</view>
			<view class="bg-fff rounded20 inpt d-flex d-flex-middle mb-4">
				<picker @change="schoolPickerChange" :value="majorIndex" :range="list[schoolIndex].question_categories" range-key="name" class="d-flex-item pl-2">
					<text class="font32" :class="list[schoolIndex].question_categories[majorIndex].id==0?'colorhold':'color5c'">{{list[schoolIndex].question_categories[majorIndex].name}}</text>
				</picker>
				<view class="px-3">
					<text class="iconfont icon-xiajiantou main-color font36"></text>
				</view>
			</view>
			
			
			<view class="mb-2 d-flex d-flex-middle" style="margin-left: -10rpx;">
				<text class="iconfont icon-xiaoxingxing font36 colorxin"></text>
				<text class="colorfff font36">请填写姓名：</text>
			</view>
			<view class="bg-fff rounded20 inpt d-flex d-flex-middle mb-4">
				<input class="d-flex-item pl-2" v-model="form.real_name" placeholder="请填写姓名" placeholder-class="colorhold font34" />
			</view>
			
			<view class="mb-2 d-flex d-flex-middle" style="margin-left: -10rpx;">
				<text class="iconfont icon-xiaoxingxing font36 colorxin"></text>
				<text class="colorfff font36">请填写身份证号码：</text>
			</view>
			<view class="bg-fff rounded20 inpt d-flex d-flex-middle mb-7">
				<input class="d-flex-item pl-2" v-model="form.id_card" placeholder="请填写身份证号码" placeholder-class="colorhold font34" />
			</view>
			
			<view class="bg-main d-flex d-flex-center d-flex-middle rounded60 mb-2" style="padding-top: 25rpx;padding-bottom: 25rpx;" @click="save">
				<text class="colorfff font32">提交</text>
			</view>
			<view class="border-main d-flex d-flex-center d-flex-middle rounded60" style="padding-top: 20rpx;padding-bottom: 20rpx;" @click="goBack">
				<text class="main-color font32">跳过，稍后再填写</text>
			</view>
		</view>
	</view>
</template>

<script>
import { userApi } from '@/http/userApi.js'
import store from '@/store/index.js'
import { mapState } from "vuex"
export default {
	data() {
		return {
			isback:'0',
			list:[
				{
					id: 0,
					name: "请选择学校",
					question_categories:[
						{
							id: 0,
							name: "请选择专业"
						}
					]
				}
			],
			schoolIndex: 0,
			majorIndex: 0,
			form:{
				school_id:'',
				major_id:'',
				real_name:'',
				id_card:''
			}
		}
	},
	computed: {
		...mapState({
			statusBarHeight: state => state.statusBarHeight,
			titleBarHeight: state => state.titleBarHeight,
			loginState: state => state.loginState
	  })
	},
	onReady() {
		console.log('onReady')
		this.getSchool()
	},
	methods:{
		save(){
			let that = this
			if(that.schoolIndex == 0){
				return uni.showToast({
					title:'请选择学校和专业',
					icon:'none'
				})
			}
			if(that.form.real_name == ''){
				return uni.showToast({
					title:'请填写姓名',
					icon:'none'
				})
			}
			if(that.form.id_card == ''){
				return uni.showToast({
					title:'请填写身份证号码',
					icon:'none'
				})
			}
			uni.showLoading({
				title:'提交中...',
				mask:true
			})
			userApi.setUserInfo(that.form).then((res)=>{
				uni.hideLoading()
				uni.showToast({
					title:'信息更新成功'
				})
				store.commit('setBasicInfo', res)
				setTimeout(()=>{
					that.goBack()
				},1000)
			}).catch((e)=>{
				uni.hideLoading()
			})
		},
		goBack(){
			if(this.isback == '0'){
				uni.navigateBack()
			}else{
				uni.reLaunch({
					url:'/pages/index/index'
				})
			}
		},
		getSchool(){
			userApi.getSchool().then((res)=>{
				this.list = this.list.concat(res)
			})
		},
		schoolPickerChange(e){
			this.schoolIndex = e.detail.value
			this.form.school_id = this.list[this.schoolIndex].id
			this.form.major_id = this.list[this.schoolIndex].question_categories[0].id
			console.log('schoolPickerChange',this.form)
		},
		majorPickerChange(e){
			this.majorIndex = e.detail.value
			this.form.major_id = this.list[this.schoolIndex].question_categories[this.majorIndex].id
			console.log('majorPickerChange',this.form)
		}
	}
}
</script>

<style scoped>
	.colorxin{
		color: #FF6D6D;
	}
	.inpt{
		height: 90rpx;
	}
	.p-bg {
	  background: linear-gradient(180deg, rgba(62, 142, 254, 0.8) 0%, rgba(62, 142, 254, 0) 100%);
	}
</style>
